<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">

		<!-- !Always force latest IE rendering engine (even in intranet) & Chrome Frame

		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>12_json</title>
		<meta name="description" content="">
		<meta name="author" content="chenyong">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">
 
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		
		<style type="text/css">
			
			
			body{
				margin:50px;
			}
			
			div{
				font-size:12px;
			}
			
			div.box{
				margin-top:30px;
			}
		
			
		</style>
		
		<script type="text/javascript">
		
		var person = {
			name:'Bill Gates',
			age:55,
			show:function(){
				alert('name:' + this.name + '\nage:' + this.age);
			}
		};
		
		var ps = [
			{name:'Amanda',age:18},
			{name:'Bob',age:11},
			{name:'Cook',age:21},
			{name:'Dent',age:22},
		]; 
		
		function fn1(){
			person.show();
			for(var i=0;i<ps.length;i++){
				alert('数组对象' + (i+1) + ':' + ps[i].name);
			}
		}
		
		
		//工厂模式生成对象
		function createFactory(name,age){
			var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.say = function(){
					alert(this.name + ',' + this.age);
				};
			return obj;
		}
		
		function fn2(){
			var p = createFactory('德华',51);
			p.say();
			alert('类型：' + typeof p + '\n是否为Person对象：' + p instanceof Person );
		}
		
		//构造方法创建对象
		function Person(name,age){
			this.name = name;
			this.age = age;
			this.say = function(){
				alert(this.name + ',' + this.age);
			};
		}
		
		function fn3(){
			var p2 = new Person('学友',48);
			p2.say();
			//alert(p2 instanceof Person);
			alert('类型：' + typeof p2 + '\n是否为Person对象：' + (p2 instanceof Person));
		}
		
		</script>
	</head>
	
	<body>
		
			
		<h3>12_JavaScript_对象</h3>
		
		<div class="box" >
			<p><b>JSON对象</b></p>
			<p>JSON（javascript object notation）json就是一个js对象</p>
			<button onclick="fn1()">测试1</button>
		</div>
		
 		<div class="box" >
			<p><b>工厂方式创建对象</b></p>
			<p>JSON（javascript object notation）json就是一个js对象</p>
			<button onclick="fn2()">测试2</button>
		</div>
		
		<div class="box" >
			<p><b>构造函数创建对象</b></p>
			<p> </p>
			<button onclick="fn3()">测试3</button>
		</div>
	
	</body>
	
</html>
